@use "src/styles/variables" as *;

.vm-tabs {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  gap: $padding-global;
  user-select: none;

  &-item {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: $padding-global $padding-small;
    color: inherit;
    text-decoration: none;
    text-transform: capitalize;
    font-size: inherit;
    font-weight: inherit;
    opacity: 0.6;
    transition: opacity 0.2s;
    cursor: pointer;

    &_active {
      opacity: 1;
    }

    &:hover {
      opacity: 0.8;
    }

    &__icon {
      display: grid;
      width: 16px;
      margin-right: $padding-small;

      &_single {
        margin-right: 0;
      }
    }
  }

  &__indicator {
    position: absolute;
    border-bottom: 2px solid;
    transition: width 200ms ease, left 300ms cubic-bezier(0.280, 0.840, 0.420, 1);
  }
}
